<template>
  <div class="home">
    <h1>你现在所学的专业是什么？</h1>
    <p>深入学习并了解相应的路线图</p>
    <div class="main-container">
      <Main
        v-for="(item, index) in courses"
        :key="index"
        :course="item.course"
        :index-learn="item.indexLearn"
        :index="index"
        :progress="item.progress"
        class="main"
        :pageLink="item.pageLink"
      />
    </div>
  </div>
</template>

<script>
import Main from "../components/Guide.vue"; // 确保路径正确

export default {
  name: "HomeView",
  components: {
    Main,
  },
  data() {
    return {
      selectedIndex: null,
      courses: [
        { course: "软件工程", indexLearn: "2025年软件工程学习指南", progress: 40 ,pageLink: '/ruanjian'},
        { course: "计算机科学与技术", indexLearn: "2025年计算机科学与技术学习指南", progress: 60 ,pageLink: '/jisuanji'},
        { course: "物联网工程", indexLearn: "2025年物联网工程学习指南", progress: 30 ,pageLink: '/wulianwang'},
        { course: "网络空间安全", indexLearn: "2025年网络空间安全学习指南", progress: 75 ,pageLink: '/wangluoanquan'},
        { course: "数据科学与大数据技术", indexLearn: "2025年数据科学与大数据技术学习指南", progress: 50 ,pageLink: '/dashuju'},
      ],
    };
  },
};
</script>

<style scoped>
h1 {
  margin-top: 30px;
  margin-left: 150px;
  font-size: 40px;
}

p {
  margin-left: 150px;
  font-size: 24px;
  color: #6b7280;
}

.main-container {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.main {
  width: 800px;
}
</style>
